import React, { useState, useEffect, useRef, useContext } from 'react';
import axios from 'axios';
import './User.module.css';
import A from "./User.module.css";
import logo from '../picture/tubiao.png';
import Lunbotu from './lunbotu/Lubotu';
import { Sidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar';
import { UploadContext } from './uploadContext';
import { message } from 'antd';

import Uptou from './uptou/Uptou1';


import { Outlet, useNavigate } from 'react-router-dom';
import { CgLaptop } from 'react-icons/cg';


import 'sober'


function EditableField({ label, prefix, initialValue, onEdit, type }) {
    const [isEditing, setIsEditing] = useState(false);
    const [editValue, setEditValue] = useState('');
    // 处理双击事件  
    const handleDoubleClick = () => {
        setIsEditing(true);
    };
    // 处理编辑完成事件  
    const handleEditCompconste = (event) => {
        event.preventDefault();
        setIsEditing(false);
        const newFieldValue = `${editValue.trim()}`; // 组合新的字段值    
        onEdit(newFieldValue); // 通知父组件字段已编辑    
    };
    // 处理输入框值的变化  
    const handleChange = (event) => {
        setEditValue(event.target.value);
    };


    return (
        <>
            {isEditing ? (
                <form onSubmit={handleEditCompconste}>
                    {label}:
                    <input type={type || 'text'} value={editValue} onChange={handleChange} style={{ width: '50%', marginTop: '1rem', marginBottom: '1rem' }} />
                    <button type="submit" style={{ marginLeft: '0.5rem', color: '#fff', backgroundColor: '#333', border: 'none', borderRadius: '0.2rem' }}>保存</button>
                </form>
            ) : (
                <MenuItem onDoubleClick={handleDoubleClick} className={A.nickname} style={{ paddingLeft: '10px', paddingRight: '10px', overflowX: 'auto', whiteSpace: 'nowrap' }}>{prefix}{initialValue}</MenuItem >
            )}
        </>
    );
}


function EditablePassword({ label, handlePasswordEdit, currentPassword, userInfo }) {
    const [isEditingOriginal, setIsEditingOriginal] = useState(false);
    const [isEditingNew, setIsEditingNew] = useState(false);
    const [originalValue, setOriginalValue] = useState('');
    const [newValue, setNewValue] = useState('');

    // 处理原密码验证
    const handleVerifyOriginal = async (event) => {
        event.preventDefault();
        const inputPassword = originalValue.trim();
        console.log(userInfo)
        if (userInfo) { // 确保userInfo存在，即用户已登录  
            try {
                // 发送POST请求到后端验证原密码  
                const response = await axios.post('http://localhost:3001/own/searchpwd', { // 假设的API端点  
                    userId: userInfo.id, // 假设userInfo中包含用户ID  
                    password: inputPassword,
                });
                if (response.data.success) { // 假设后端响应包含success字段表示验证是否成功  
                    setIsEditingOriginal(false);
                    setIsEditingNew(true); // 如果原密码正确，允许编辑新密码  
                } else {
                    console.log(response.data.msg)
                    message.error('原密码错误！');
                }
            } catch (error) {
                console.error('Error verifying original password:', error);
                message.error('验证原密码时出错！');
            }
        } else {
            message.error('请先登录！');
        }
    };


    const handlePasswordUpdate = async (newPassword) => {
        if (userInfo) {
            try {
                // 发送POST请求到后端更新密码  
                const response = await axios.post('http://localhost:3001/own/updatepwd', { // 假设的API端点  
                    userId: userInfo.id, // 假设userInfo中包含用户ID  
                    newPassword: newPassword, // 新密码  
                });
                if (response.data.success) {
                    // 密码更新成功，可以通知用户或进行其他操作  
                    message.success('密码修改成功！');
                    console.log(response.data.msg)
                    // 清除状态，关闭编辑模式等（如果需要）  
                    setIsEditingOriginal(false);
                    setIsEditingNew(false);
                    setOriginalValue('');
                    setNewValue('');
                } else {
                    message.error(response.data.msg || '密码更新失败！');
                }
            } catch (error) {
                console.error('Error updating password:', error);
                message.error('密码更新时出错！');
            }
        }
    };

    // 处理新密码提交  
    const handleEditNew = async (event) => {
        event.preventDefault();
        // 清除前后空格  
        const trimmedNewValue = newValue.trim();
        // 检查密码长度是否大于六位  
        if (trimmedNewValue.length <= 6) {
            message.error('密码长度必须大于六位！');
            return;
        }
        // 检查密码是否至少包含两种字符（这里假设至少包含字母和数字）  
        if (!/(?=.*[a-zA-Z])(?=.*\d)/.test(trimmedNewValue)) {
            message.error('密码必须至少包含字母和数字两种字符！');
            return;
        }
        // 检查新密码是否与原密码相同  
        if (trimmedNewValue === originalValue) {
            message.error('新密码不能与原密码相同！');
            return;
        }



        //////////////////////////////////////////////////////////////////////////////////////////////////////////////更改后不会修改昵称
        // 调用更新函数
        await handlePasswordUpdate(newValue); // 使用新密码调用更新函数  



        setIsEditingNew(false); // 重置编辑状态  
        setNewValue(''); // 清除输入框值  
    };
    // 处理输入框值的变化  
    const handleOriginalChange = (event) => {
        setOriginalValue(event.target.value);
    };

    const handleNewChange = (event) => {
        setNewValue(event.target.value);
    };

    return (
        <>
            {!isEditingNew && !isEditingOriginal && (
                <MenuItem onDoubleClick={() => setIsEditingOriginal(true)} className={A.nickname} style={{ paddingLeft: '10px', paddingRight: '10px', overflowX: 'auto', whiteSpace: 'nowrap' }}>密码：已设置</MenuItem >
            )}
            {isEditingOriginal && (
                <form onSubmit={handleVerifyOriginal}>
                    {label} (原密码):
                    <input type="password" value={originalValue} onChange={handleOriginalChange} />
                    <button type="submit">验证</button>
                </form>
            )}
            {isEditingNew && (
                <form onSubmit={handleEditNew}>
                    {label} (新密码):
                    <input type="password" value={newValue} onChange={handleNewChange} />
                    <button type="submit">保存</button>
                </form>
            )}
        </>
    );
}



//主组件
function User() {




    // 导航的逻辑
  const [showDropdown, setShowDropdown] = useState('');  
  
  const submenuRefRecipe = useRef(null);  
  const submenuRefHealth = useRef(null);  

  const navbarRef = useRef(null);

  
  useEffect(() => {
    const handleScroll = () => {
      if (navbarRef.current) { // 确保 navbarRef.current 不为空
        if (window.scrollY > 0) {
          navbarRef.current.classList.add(A.sticky);
        } else {
          navbarRef.current.classList.remove(A.sticky);
        }
      }
    };

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);
  
  const handleMouseEnter = (dropdownName) => {  
    return () => {  
      setShowDropdown(dropdownName);  
    };  
  };  
  
  const handleMouseLeave = (submenuRef) => {  
    return () => { 
      setTimeout(() => {  
        if (submenuRef.current && !submenuRef.current.contains(document.activeElement)) {   
          setShowDropdown('');  
        }  
      }, 100);  
    };  
  };  
  
  const handleSubmenuMouseEnter = () => {   
  };  
  
  const handleSubmenuMouseLeave = (submenuRef) => {  
    return () => {  
      setTimeout(() => {  
        if (!submenuRef.current || !submenuRef.current.contains(document.activeElement)) {  
          setShowDropdown('');  
        }  
      }, 100);  
    };  
  };  

    // 跳转
    const nav = useNavigate();

    // const { logout } = useContext(UploadContext);
    
    const [userInfo, setUserInfo] = useState(null); // 初始值为null，表示没有用户信息


    useEffect(() => {  
        const userInfoString = localStorage.getItem('user');  
        if (userInfoString) {  
          try {  
            const parsedUserInfo = JSON.parse(userInfoString);  
            setUserInfo(parsedUserInfo); // 设置userInfo状态为用户信息对象  
            console.log(parsedUserInfo.sex)
            setSex(parsedUserInfo.sex); // 设置性别状态
            setSignn(parsedUserInfo.sign); // 设置签名状态
            console.log('用户信息:', parsedUserInfo)
          } catch (error) {  
            console.error('Error parsing user info from localStorage:', error);  
            // 清除localStorage中的用户信息或进行其他错误处理  
            localStorage.removeItem('userInfo');  
          }  
        }  
      }, []); // 空数组表示这个effect只在组件初次渲染时运行  


    useEffect(() => {
        if (userInfo) {
            console.log('用户信息:', userInfo);
        }
        // localStorage.setItem('user', JSON.stringify(userInfo));
    }, [userInfo]); // 当 userInfo 变化时，执行这个 effect 

    const [isSidebarOpen, setSidebarOpen] = useState(false);
    const sidebarRef = useRef(null);
    const toggleSidebar = () => setSidebarOpen(!isSidebarOpen);

    const sidebarClass = isSidebarOpen ? `${A.sidebar} ${A.open}` : A.sidebar;
    // const { isUploading, startUpload, endUpload } = useContext(UploadContext);
    const isUploading = false;

    const [nickname, setNickname] = useState(); // 假设的初始昵称 
    const [email, setEmail] = useState(); // 假设的初始邮箱
    const [sex, setSex] = useState(); // 假设的初始性别
    const [signn, setSignn] = useState(); // 假设的初始签名
    // const [password, setPassword] = useState('密码:123456e'); // 假设的初始密码 


    // 修改用户名 
    const handleNicknameEdit = async (newNickname) => {
        if (userInfo) {
            try {
                // 发送POST请求到后端更新昵称  
                const response = await axios.post('http://localhost:3001/own/updateusername', { // 假设的API端点  
                    userId: userInfo.id, // 假设userInfo中包含用户ID  
                    newUsername: newNickname, // 新昵称  
                });
                if (response.data.success) {
                    // 更新昵称状态（尽管后端已经更新，但前端状态也应该同步）  
                    setNickname(newNickname);
                    const updatedUserInfo = { ...userInfo, user_name: newNickname };
                    setUserInfo(updatedUserInfo); // 更新userInfo状态 
                    localStorage.setItem('user', JSON.stringify(updatedUserInfo));
                    console.log('昵称已编辑:', newNickname);
                    message.success('昵称更新成功！');
                } else {
                    message.error(response.data.msg || '昵称更新失败！');
                }
            } catch (error) {
                console.error('Error updating nickname:', error);
                message.error('昵称更新时出错！');
            }
        } else {
            message.error('请先登录！');
        }
    };

    // 修改邮箱
    const handleEmailEdit = async (newEmail) => {
        // 使用正则表达式验证邮箱格式    
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (emailRegex.test(newEmail)) {
            try {
                if (userInfo) {
                    // 发送POST请求到后端更新邮箱  
                    const response = await axios.post('http://localhost:3001/own/updateemail', { // 假设的API端点  
                        userId: userInfo.id, // 假设userInfo中包含用户ID  
                        newEmail: newEmail, // 新邮箱地址  
                    });
                    if (response.data.success) {
                        // 更新邮箱状态（尽管后端已经更新，但前端状态也应该同步） 
                        setEmail(newEmail);
                        const updatedUserInfo = { ...userInfo, e_mail: newEmail };
                        setUserInfo(updatedUserInfo); // 更新userInfo状态 
                        localStorage.setItem('user', JSON.stringify(updatedUserInfo));
                        console.log('邮箱已编辑:', newEmail);
                        message.success('邮箱更新成功！');
                    } else {
                        message.error(response.data.msg || '邮箱更新失败！');
                    }
                } else {
                    message.error('请先登录！');
                }
            } catch (error) {
                console.error('Error updating email:', error);
                message.error('邮箱更新时出错！');
            }
        } else {
            // 如果邮箱格式不正确，显示错误消息  
            console.log(newEmail)
            message.error('请输入正确的邮箱地址！');
        }
    };

    // 修改性别
    const handleSexEdit = async (newSex) => {
        if (userInfo) {
            const newSexValue = newSex === '男' ? true : newSex === '女' ? false : null;
            if (newSexValue === null) {
                message.error('性别必须是“男”或“女”！');
                return;
            }

            try {
                const response = await axios.post('http://localhost:3001/own/updatesex', {
                    userId: userInfo.id,
                    newSex: newSex,
                });
                if (response.data.success) {
                    setSex(newSex);
                    const updatedUserInfo = { ...userInfo, sex: newSex };
                    setUserInfo(updatedUserInfo);
                    localStorage.setItem('user', JSON.stringify(updatedUserInfo));
                    console.log('性别修改成功');
                } else {
                    console.log('性别修改失败:', response.data.msg);
                }
            } catch (error) {
                console.error('Error updating sex:', error);
            }
        }
    };

    // 修改签名
    const handleSignnEdit = async (newSignn) => {
        if (userInfo) {
            try {
                const response = await axios.post('http://localhost:3001/own/updatesign', {
                    userId: userInfo.id,
                    newSign: newSignn,
                });
                if (response.data.success) {
                    setSignn(newSignn);
                    const updatedUserInfo = { ...userInfo, signn: newSignn };
                    setUserInfo(updatedUserInfo);
                    localStorage.setItem('user', JSON.stringify(updatedUserInfo));
                    console.log('签名修改成功');
                } else {
                    console.log('签名修改失败:', response.data.msg);
                }
            } catch (error) {
                console.error('Error updating signn:', error);
            }
        }
        console.log(userInfo.tou_img);
    };




    
    // 假设favorites是一个数组，包含用户收藏的菜品ID或其他标识符  
    // const userInfoc = localStorage.getItem('user');

    // const parsedUserInfo = JSON.parse(userInfoc);

    // const username = parsedUserInfo.user_name;
    // console.log(parsedUserInfo.user_name)
    // const [collectData, setCollectData] = useState([]);
    // const fetchUserCollect = async () => {
    //     try {
    //         const response = await axios.post('http://localhost:3001/own/searchusercollect', { username });
    //         setCollectData(response.data);
    //         // console.log('收藏记录：', response.data[0].food);
    //         // console.log(collectData[0].food)
    //         // 在这里处理收藏记录数据
    //     } catch (error) {
    //         console.error('Error fetching user collect:', error);
    //         // 在这里处理错误
    //     }
    // };
    

    const [collectData, setCollectData] = useState([]);
    // 调用发送请求的函数
    useEffect(() => {
        const userInfoc = localStorage.getItem('user');
        const parsedUserInfo = JSON.parse(userInfoc);
        const username = parsedUserInfo.user_name;
        console.log(parsedUserInfo.user_name)
        // const [collectData, setCollectData] = useState([]);
        const fetchUserCollect = async () => {
            try {
                const response = await axios.post('http://localhost:3001/own/searchusercollect', { username });
                setCollectData(response.data);
                console.log('收藏记录：', response.data[0].food);
                console.log(collectData[0].food)
                // 在这里处理收藏记录数据
            } catch (error) {
                console.error('Error fetching user collect:', error);
                // 在这里处理错误
            }
        };
    fetchUserCollect()
    }, []);


    const handleFavorite = (favoriteId, isAdd) => {
        // 创建一个新的favorites数组副本  
        let newcollectData = [...collectData];

        if (!isAdd) {
            // 删除收藏项  
            newcollectData = newcollectData.filter(favorite => favorite.id !== favoriteId);
            setCollectData(newcollectData);
            console.log(newcollectData)
        } else {
            // 添加逻辑（这里假设我们不会通过这个函数添加收藏，因为它主要用于删除）  
            // 可以在这里添加添加收藏的逻辑，但通常会有另一个函数来处理添加操作  
        }
    };



    // 假设avatar是一个URL，用于显示用户头像
    const handleAvatarUpdate = (avatarUrl) => {
        if (userInfo) {
            const updatedUserInfo = { ...userInfo, tou_img: avatarUrl };
            setUserInfo(updatedUserInfo); // 更新用户信息状态
            localStorage.setItem('user', JSON.stringify(updatedUserInfo)); // 更新本地存储
        }
    };


    const [imageUrl, setImageUrl] = useState(null); // 用于存储头像的URL



    useEffect(() => {
        const fetchUserInfo = async () => {
            const userInfoString = localStorage.getItem('user');
            console.log('本地存储中的用户信息:', userInfo);

            if (userInfoString) {
                    const parsedUserInfo = JSON.parse(userInfoString);
                    console.log('解析后的用户信息:', parsedUserInfo);

                    if (parsedUserInfo && parsedUserInfo.id) {
                        try {
                            // 将userId作为查询参数传递
                            const response = await axios.post(`http://localhost:3001/own/searchuserinfo`, {
                                 userId: parsedUserInfo.id 
                            });
                            console.log(response.data)
                            // if (response.data.success) {
                                const userData = response.data;
                                setUserInfo(userData);
                                setImageUrl(userData.tou_img); // 更新 imageUrl
                            // } else {
                            //     console.log('获取用户信息失败:', response.data.message)
                            //     message.error('获取用户信息失败');
                            // }
                        } catch (error) {
                            console.error('Error fetching user info:', error);
                            message.error('获取用户信息时出错');
                        }
                    } 
            } 
        };
        fetchUserInfo();
    }, [imageUrl]);


    // 退出登录
    const handleLogout = () => {
        setUserInfo(null); // 重置用户信息状态
        localStorage.removeItem('user'); // 清空本地存储中的用户信息
        setImageUrl(null); // 清除头像预览
        // nav('/Denglu'); // 跳转到登录页面
    };



    // 搜索框搜索菜品
    const [searchTerm, setSearchTerm] = useState('');
    const [searchResults, setSearchResults] = useState([]);

    // 用于防抖的定时器
    let debounceTimer;

    const handleSearchChange = (e) => {
        const keyword = e.target.value;
        setSearchTerm(keyword);

        // 清除之前的定时器
        if (debounceTimer) {
            clearTimeout(debounceTimer);
        }

        // 设置一个新的定时器，在 300 毫秒后执行搜索操作
        debounceTimer = setTimeout(() => {
            performSearch(keyword);
        }, 300);
    };

    const performSearch = async (keyword) => {
        if (keyword) {
            try {
                const response = await axios.post('http://localhost:3001/own/searchdishs', { keyword });
                if (response.data.success) {
                    setSearchResults(response.data.data);
                    console.log(response.data.data);
                } else {
                    setSearchResults([]);
                }
            } catch (error) {
                console.error('获取搜索结果时出错:', error);
                setSearchResults([]);
            }
        } else {
            setSearchResults([]);
        }
    };

    const handleClearSearch = () => {
        setSearchTerm('');
        setSearchResults([]);
    };  
    



    // 处理点击侧边栏外关闭侧边的函数
    useEffect(() => {
        function handleDocumentClick(event) {
            if (isSidebarOpen && !sidebarRef.current.contains(event.target) && !isUploading) {
                console.log('点击了侧边栏外部');
                setSidebarOpen(false);
            }
        }

        document.addEventListener('click', handleDocumentClick);

        return () => {
            document.removeEventListener('click', handleDocumentClick);
        };
    }, [isSidebarOpen, isUploading]);

    return (
        <>
            <div className={`${A.main} ${A.one}`} ref={navbarRef}>
                <div className={A.logo}>
                    <img src={logo} alt="Logo" />
                </div>
                <div className={A.title}>佳肴绘卷</div>
                <div style={{marginLeft: '2rem',zIndex: '100'}}>
                <s-search size="small">
                    <s-icon type="search" slot="start"></s-icon>
                    <input type="text"
                        placeholder="搜索菜品"
                        value={searchTerm}
                        onChange={handleSearchChange} 
                    />
                        <s-icon type="close" slot="end" onClick={handleClearSearch}></s-icon>
                        <div slot="drop" style={{height:'auto'}}>
                            {searchResults.map((result, index) => (
                                <div key={index} style={{margin:'0.8rem'}} className="searchp">
                                    <s-icon type="search" slot="start" style={{height:'1rem',width:'1rem',marginRight:'0.8rem'}}></s-icon>
                                    {result.foodname}
                                </div>
                            ))}
                        </div>
                </s-search>
                </div>
                <nav className={A.navbar}>
                    <ul>
                        <li onClick={() => { nav("/") }} style={{ cursor: "pointer" }}>
                            首页
                        </li>
                        <li
                            className={A.dropdownToggle}
                            onMouseEnter={handleMouseEnter('菜谱分类')}
                            onMouseLeave={() => handleMouseLeave(submenuRefRecipe)}
                            onClick={() => { nav("/recipe") }}
                            style={{ cursor: "pointer" }}
                        >
                            菜谱分类
                            {showDropdown === '菜谱分类' && (
                                <ul
                                    className={`${A.submenu} ${showDropdown === '菜谱分类' ? A.show : ''}`} ref={submenuRefRecipe}
                                    onMouseEnter={handleSubmenuMouseEnter}
                                    onMouseLeave={handleSubmenuMouseLeave(submenuRefRecipe)}
                                >
                                    <div className={A.hotTags}>
                                        <a href=''>热门标签</a>
                                        <div className={A.hotTags_list}>甜点 竹笋炒腊肉 素食</div>
                                        <div className={A.hotTags_list}>减脂套餐 健康饮食 肉食</div>
                                        <div className={A.hotTags_list}>包子 米饭 汤</div>
                                    </div>
                                    <div className={A.hotTags}>
                                        <div><a href=''>三餐</a></div>
                                        <div className={A.hotTags_list}><a href='' style={{ color: '#999' }}>早餐</a></div>
                                        <div className={A.hotTags_list}><a href='' style={{ color: '#999' }}>午餐</a></div>
                                        <div className={A.hotTags_list}><a href='' style={{ color: '#999' }}>晚餐</a></div>
                                        <div className={A.hotTags_list}><a href='' style={{ color: '#999' }}>下午茶</a></div>
                                    </div>
                                    <div className={A.hotTags}>
                                        <div><a href=''>地方小吃</a></div>
                                        <div className={A.hotTags_list}><a href='' style={{ color: '#999' }}><span>川菜</span> <span>东北菜</span></a></div>
                                        <div className={A.hotTags_list}><a href='' style={{ color: '#999' }}><span>鲁菜</span> <span>京菜</span> </a></div>
                                        <div className={A.hotTags_list}><a href='' style={{ color: '#999' }}><span>粤菜</span> <span>闽菜</span> </a></div>
                                        <div className={A.hotTags_list}><a href='' style={{ color: '#999' }}><span>沪菜</span> <span>豫菜</span> </a></div>
                                    </div>
                                    <div className={A.hotTags}>
                                        <div ><a href='' >甜品</a></div>
                                        <div className={A.hotTags_list}><a href='' style={{ color: '#999' }}>饼干</a></div>
                                        <div className={A.hotTags_list}><a href='' style={{ color: '#999' }}>面包</a></div>
                                        <div className={A.hotTags_list}><a href='' style={{ color: '#999' }}>蛋糕</a></div>
                                    </div>

                                    <div className={A.hotTags}>
                                        <div ><a href='' >实用类型</a></div>
                                        <div className={A.hotTags_list}><a href='' style={{ color: '#999' }}>素食</a></div>
                                        <div className={A.hotTags_list}><a href='' style={{ color: '#999' }}>肉食</a></div>
                                        <div className={A.hotTags_list}><a href='' style={{ color: '#999' }}>汤</a></div>
                                        <div className={A.hotTags_list}><a href='' style={{ color: '#999' }}>家常菜</a></div>
                                    </div>
                                </ul>
                            )}
                        </li>
                        <li
                            className={A.dropdownToggle}
                            onMouseEnter={handleMouseEnter('健康饮食')}
                            onMouseLeave={() => handleMouseLeave(submenuRefHealth)}
                            style={{ cursor: "pointer" }}
                        >
                            健康饮食
                            {showDropdown === '健康饮食' && (
                                <ul
                                    className={`${A.submenu} ${showDropdown === '健康饮食' ? A.show : ''}`}
                                    ref={submenuRefHealth}
                                    onMouseEnter={handleSubmenuMouseEnter}
                                    onMouseLeave={handleSubmenuMouseLeave(submenuRefRecipe)}
                                    style={{ cursor: "pointer" }}
                                >
                                    <li><a href=''>饮食健康</a></li>
                                    <li><a href=''>功能性调理</a></li>
                                    <li><a href=''>人群膳食</a> </li>
                                    <li><a href=''>脏腑调理</a> </li>
                                </ul>
                            )}
                        </li>
                    </ul>
                </nav>
                <div className={A.userActions}>
                    {userInfo ? (
                        // 如果userInfo存在（即用户已登录），显示头像  
                        <div className={A.avatarContainer} onClick={(event) => {
                            event.stopPropagation(); // 阻止事件冒泡  
                            toggleSidebar();
                            // console.log(userqwe.tou_img)
                        }}>
                            {userInfo.tou_img && (
                               <img src={
                                    `http://localhost:3001/images/${imageUrl}`
                                } alt="User Avatar" style={{width: '3.5rem', height: '3.5rem', borderRadius: '50%',marginTop: '1.5rem',marginLeft: '5.2rem'}}/> // 确保这里使用了userInfo.tou_img 
     
                            )}
                            {!userInfo.tou_img && (
                                // 如果没有头像URL，显示默认头像或占位符  
                                <div className={A.defaulAtvatar}>默认头像</div>
                            )}
                        </div>
                    ) : (
                        // 如果userInfo不存在（即用户未登录），显示登录链接  
                        <a href="#" onClick={() => nav('/Denglu')} className={A.loginLink}>登录</a>
                    )}

                    {/* <div><Lunbotu /></div> */}
                    <div className={sidebarClass} ref={sidebarRef}>
                        <Sidebar style={{ height: '80vh', width: '250px', backgroundColor: 'red', backgroundImage: 'url(https://picsum.photos/800/500/?random)', borderRadius: '20px' }}>
                            <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                                <div className={A.sidebarHeader}>
                                    <div className={A.avatarContainer}>
                                        <Uptou onAvatarUpdate={handleAvatarUpdate} imageUrl={imageUrl} setImageUrl={setImageUrl}/>
                                    </div>
                                    <div className={A.fontw}>{userInfo ? userInfo.user_name : '未登录'}</div>
                                </div>
                            </div>
                            <Menu style={{ opacity: '0.8', fontSize: '15px' }} transitionDuration={800} className={A.menu}>
                                <SubMenu label="我的">
                                    {/* <MenuItem style={{paddingLeft:'10px',paddingRight:'10px',overflowX: 'auto',whiteSpace: 'nowrap'}}>昵称(账号):土土大王</MenuItem> */}
                                    <EditableField
                                        label="昵称"
                                        prefix="昵称："
                                        initialValue={userInfo ? userInfo.user_name : '未登录'}
                                        // onEdit={(newNickname) => handleNicknameEdit({ newNickname })}
                                        onEdit={handleNicknameEdit}
                                    />
                                    <EditableField
                                        label="邮件"
                                        prefix="邮件："
                                        initialValue={userInfo ? userInfo.e_mail : '未登录'} // 假设这是初始值或从状态中获取  
                                        onEdit={newEmail => handleEmailEdit( newEmail )}
                                    />

                                    <EditableField
                                        label="性别"
                                        prefix="性别："
                                        initialValue={sex}  // 假设这是初始值或从状态中获取  
                                        onEdit={(newSex) => handleSexEdit(newSex)}
                                    />


                                    <EditableField
                                        label="签名"
                                        prefix="签名："
                                        initialValue={signn} // 假设这是初始值或从状态中获取  
                                        onEdit={(newSignn) => handleSignnEdit(newSignn)}
                                    />
                                    <EditablePassword
                                        label="密码"
                                        // handlePasswordEdit={handlePasswordEdit}
                                        currentPassword={userInfo ? userInfo.password : '未登录'} // 假设这是初始值或从状态中获取传递当前密码的值（不带前缀）
                                        userInfo={userInfo}
                                    />


                                </SubMenu>

                                <MenuItem>发布</MenuItem>


                                {/* 收藏 */}
                                {collectData.length === 0 ? (
                                    <MenuItem>没有收藏</MenuItem>
                                ) : (
                                    <SubMenu label="我的收藏" >
                                        {collectData.map((favorite) => (
                                            <div key={favorite.collect_id} style={{ display: 'flex', alignItems: 'center' }}>
                                                <MenuItem style={{}}>{favorite.food}</MenuItem>
                                                <button onClick={(event) => {
                                                    event.stopPropagation(); // 阻止事件冒泡  
                                                    handleFavorite(favorite.id, false);
                                                    console.log(collectData.length);
                                                }} style={{ marginRight: '10px', height: '20px', width: '60px', borderRadius: '5px', backgroundColor: '#333', border: 'none', color: '#fff' }}>删除</button>
                                            </div>
                                        ))}
                                    </SubMenu>
                                )}
                                <MenuItem onClick={handleLogout}>退出登录</MenuItem>
                            </Menu>

                        </Sidebar>
                    </div>

                </div>
            </div>
            <Outlet/>
        </>
    );
}

export default User;


